<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<style>


    .s {
        clear: both;
        margin-top: 10px
    }
</style>

<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">

                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                        <ul class="layui-tab-title">
                            <li class="" onclick="go('index')">城市列表</li>
                            <li class="layui-this" onclick="">添加城市</li>
                        </ul>

                        <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">
                            <div class="layui-tab-item layui-show" style="padding-top: 15px">
                                <form class="layui-form " action="">

                                    <div class="layui-form-item">
                                        <div class="layui-inline" style="margin-right: 0px">
                                            <label class="layui-form-label">省：</label>
                                            <div class="layui-input-block">
                                                <select id="seleAreaNext" name="pro" lay-filter="province" lay-verify="required">
                                                    <option value="">请选择省</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="layui-inline" style="margin-right: 0px">
                                            <label class="layui-form-label">市：</label>
                                            <div class="layui-input-block">
                                                <select id="seleAreaThird" name="ci" lay-verify="required" lay-filter="city">
                                                    <option value="">请选择市</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="layui-inline" style="margin-right: 0px">
                                            <label class="layui-form-label">区：</label>
                                            <div class="layui-input-block">
                                                <select id="seleAreaFouth" name="dis" lay-verify="required">
                                                    <option value="">请选择区</option>
                                                </select>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="layui-form-item form-footer2">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="add_city">确认添加</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    var app = new Vue({
        el: '#app',
    });
    layui.use(['form', 'upload', 'laydate'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;

        //监听submit提交
        form.on('submit(add_city)', function (obj) {
            console.log(obj.field);
            $.post('{:url("add_city")}',{data:obj.field},
                function (res) {
                    console.log(res.code);
                    if (res.code == 1) {
                        layer.msg(res.msg, {icon: 1});
                        return false;
                    }
                    else {
                        layer.msg(res.msg, {icon: 2}, function () {

                        })
                        return false;
                    }
                });
            return false;
        });

        form.on('select(province)', function(data){
            var id = $("#seleAreaNext").find("option:selected").val();
            var selCity1 = $("#seleAreaThird")[0];
            for (var i = selCity1.length - 1; i >= 0; i--) {
                selCity1.options[i] = null;
            }
            var opt = new Option("请选择市", "-1");
            selCity1.options.add(opt);
            $.ajax({
                type : "post",
                url : '{:url("get_city")}',
                dataType : "json",
                data : {
                    "province_id" : id
                },
                success : function(data) {
                    if (data != null && data.length > 0) {
                        console.log(data);
                        for (var i = 0; i < data.length; i++) {
                            var opt = new Option(data[i].city_name,data[i].city_id);
                            selCity1.options.add(opt);
                        }
                        setTimeout(function () {
                            form.render();
                        },500);
                    }
                }
            });
        });
        form.on('select(city)', function(data){
            var id = $("#seleAreaThird").find("option:selected").val();
            var selArea = $("#seleAreaFouth")[0];
            for (var i = selArea.length - 1; i >= 0; i--) {
                selArea.options[i] = null;
            }
            var opt = new Option("请选择区县", "-1");
            selArea.options.add(opt);
            $.ajax({
                type : "post",
                url : '{:url("get_district")}',
                dataType : "json",
                data : {
                    "city_id" : id
                },
                success : function(data) {
                    if (data != null && data.length > 0) {
                        console.log(data);
                        for (var i = 0; i < data.length; i++) {
                            var opt = new Option(data[i].district_name,data[i].district_id);
                            selArea.options.add(opt);
                        }
                        setTimeout(function () {
                            form.render();
                        },500);
                    }
                }
            });

        });

    });

    var selCity = $("#seleAreaNext")[0];
    for (var i = selCity.length - 1; i >= 0; i--) {
        selCity.options[i] = null;
    }
    var opt = new Option("请选择省", "-1");
    selCity.options.add(opt);
    $.ajax({
        type : "post",
        url :'{:url("get_province")}' ,
        dataType : "json",
        async: false,
        success : function(data) {
            if (data != null && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    var opt = new Option(data[i].province_name,
                        data[i].province_id);
                    selCity.options.add(opt);
                }
                $("#seleAreaNext").val($("#provinceid").val());
            }
        }
    });
</script>
<script type="text/javascript" src="/res/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="/res/js/plupload/i18n/zh_CN.js"></script>
<script type="text/javascript" src="/res/js/qiniu.js"></script>

